<template>
  <div id='tmpl'>
      <div class="lunbo">
          <slider :imgs="list"></slider>
      </div>
      <div class="buy">
          <h4>{{params.title}}</h4>
          <p class="line"></p>
          <p>
              <span>市场价:
                  <s>￥{{params.market_price}}</s>
              </span>
              <span>销售价:
                  <span class="red">{{params.sell_price}}</span>
              </span>
          </p>
          <div>
              购买数量 : <inputnum class="inputunmClass" @num="getCount"></inputnum>
          </div>
            <mt-button type="primary" size="small" >立即购买</mt-button>
            <mt-button type="danger" size="small" @click="toshopCar">加入购物车</mt-button>
            <transition  name="show"
            @before-enter="benter"
            @enter="enter"
            @after-enter="aftenter">
              <div class="ball" v-show="isShow"></div>
            </transition>
      </div>
      <div class="params">
          <h4>商品参数</h4>
          <p class="line"></p>
          <ul>
              <li>商品货号 : {{params.goods_no}}</li>
              <li>库存情况 : {{params.stock_quantity}}件</li>
              <li>上线时间 : {{params.add_time | datefmt("YYYY-MM-DD")}}</li>
          </ul>
      </div>
      <div class="btn">
            <router-link v-bind="{to:'/goods/getdesc/'+id}">
            <mt-button type="primary" size="large" >商品详情</mt-button>
            </router-link>
            <router-link v-bind="{to:'/subcom/comment/'+id}">
            <mt-button type="danger" size="large" >商品评论</mt-button>
            </router-link>
      </div>
  </div>
</template>
<script>
import slider from "../../kits/slider.vue";
import { Toast } from "mint-ui";
import inputnum from "./inputnum.vue";
import {vm,count} from "../../kits/vm.js";
//相当于引入这段代码在这个js中
import {setItem,valueObj} from "../../kits/localrg.js";
export default {
  components: {
    slider,
    inputnum
  },
  name: "component_name",
  data() {
    return {
      id: 0,
      list: [],
      params: {},
      subcount: 1,
      isShow: false
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.getlunbo();
    this.getbuy();
  },

  methods: {
      benter(ele){ //在动画中如果方法名在transition中写错也不会报错;
     ele.style.transform="translate(0,0)"
  },
  enter(ele,done){
    ele.offsetWidth;
    ele.style.transform="translate(72px,320px)";
    done();
  },
    aftenter(ele){
      this.isShow=!this.isShow;;
    },
    getlunbo() {
      var url = `${this.$common.apidomain}/api/getthumimages/${this.id}`;
      this.$http.get(url).then(res => {
        if (res.body.status != 0) {
          Toast(res.body.massege);
          return;
        }
        this.list = res.body.message;
      });
    },
    getbuy() {
      var url = `${this.$common.apidomain}/api/goods/getinfo/${this.id}`;
      this.$http.get(url).then(res => {
        console.log(res);
        if (res.body.status != 0) {
          Toast(res.body.massege);
          return;
        }
        this.params = res.body.message[0];
      });
    },
    //获取inputnum子组件数值
    getCount(input){
      //console.log(input);
      this.subcount=input;
    },
    toshopCar(){
      vm.$emit(count,this.subcount);
      this.isShow=!this.isShow;
      valueObj.goodId=this.id;
      valueObj.count=this.subcount;
      //console.log(valueObj);
      setItem(valueObj);
    }
  }
};
</script>
<style lang="css" scoped>
#tmpl {
  padding: 2px;
}
.lunbo {
  border: 1px solid #0094ff;
  border-radius: 5px;
}
.buy {
  margin-top: 5px;
  border: 1px solid #0094ff;
  border-radius: 5px;
  padding: 5px;
  position: relative;
}
.buy h4 {
  color: #0094ff;
}
.buy .line {
  border-top: 1px solid #0094ff;
}
.buy .mint-button--danger{
  margin-left: 10px;
}
.buy .ball{
  width: 18px;
  height: 18px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  bottom: 42px;
  left: 128px;
  z-index: 99;
}
.params {
  border: 1px solid #0094ff;
  padding: 5px;
  margin-top: 5px;
  border-radius: 5px;
}
.params ul {
  list-style: none;
  padding-left: 0;
}
.btn {
  border: 1px solid #0094ff;
  margin-top: 5px;
  padding: 5px;
  border-radius: 5px;
}
.btn .mint-button--primary{
    margin-bottom: 20px;
}
.inputunmClass {
   display: inline-block;
}
</style>